/*
 * @Author: liang.jirong
 * @Date: 2022-06-02 10:34:32
 * @Email: liang.jirong@foxmail.com
 * @LastEditors: liang.jirong
 * @LastEditTime: 2022-06-02 17:03:10
 * @Description: file information
 * @Company: zzsoft
 */
import React from 'react';
// import { useEffect } from 'react';

const X = 'X';
const O = 'O';

// 方格
class Square extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            squareSzie: 50
        }
    }

    componentDidMount() {
        let squareSzie = Math.floor((window.innerWidth - 50) / this.props.boardSize);
        squareSzie = squareSzie > 50 ? 50 : squareSzie;
        
        this.setState({ squareSzie });
    }

    render() {
        const squares = this.props.squares;
        const getIcon = function (idx) {
            if (squares[idx] === X) {
                return '●';
            } else if (squares[idx] === O) {
                return '○';
            } else {
                return '';
            }
        }

        return (
            <button className='square' title={this.props.idx}
                onClick={() => this.props.onClick()}
                style={{ width: this.state.squareSzie + 'px', height: this.state.squareSzie + 'px' }}
            >
                {getIcon(this.props.idx)}
            </button> // this.props.idx
        );
    }
}

// 棋盘
export default class Board extends React.Component {
    constructor(props) {
        super(props);

        const size = props.data.boardSize;
        this.state = {
            boardSize: size,
            squares: Array(size * size).fill(null)
        };
    }

    // 当方格被点击时更新方格的状态，并通知到Game
    clickHandler(idx) {
        const squares = this.state.squares.slice();

        if (typeof idx != 'number' || squares[idx]) {
            console.log(idx, squares[idx]);
            return;
        }

        if (this.props.data.xIsNext) {
            squares[idx] = X;
        } else {
            squares[idx] = O;
        }

        this.setState({ squares: squares }, () => {
            console.log(this.state.squares);
            this.props.boardOnChange(idx, squares);
        });
    }

    giveUpBtnclickHandler(){
        this.props.giveUp();

        const size = this.props.data.boardSize;
        this.setState({squares: Array(size * size).fill(null)});
    }

    renderSquare(i) {
        return <Square idx={i} key={i.toString()}
            squares={this.state.squares} boardSize={this.state.boardSize}
            onClick={() => this.clickHandler(i)}
        />
    }

    renderSquareRow(row, rows) {
        return (<div className='board-row' key={row}>
            {rows.map((item, idx) => {
                return this.renderSquare(this.state.boardSize * row + idx);
            })}
        </div>);
    }

    render() {
        const status = this.props.data.xIsNext ? 'X' : 'O';

        const rows = [];
        for (let i = 0; i < this.state.boardSize; i++) {
            rows.push({ idx: i });
        }

        return (
            <div className="game-board-box">
                <div className='game-board'>
                    {rows.map((item, row) => {
                        return this.renderSquareRow(row, rows);
                    })}                    
                </div>

                <div className='game-info'>
                    <button onClick={() => {this.giveUpBtnclickHandler()}}>我要认输</button>    
                </div>                
                <div className='game-info'>正在等待玩家：<b>{status}</b> 走棋</div>
            </div>
        );
    }
}